<template>
  <article class="page">
    <headerbar>更换头像</headerbar>
    <section class="frame-content-sub no-bg">
      <section class="block">

        <section class="pdh-4"></section>
        <section class="pdh-4">

          <div class="pdv-10"></div>
          <div class="change-avatar">
            <cube-upload
              v-model="files"
              ref="upload"
              @files-added="uploadFile"
              @input="onInput"
              @file-error="">
              <div class="clear-fix">
                <cube-upload-btn :multiple="false">
                  <div v-if="!fileid || fileid === ''" class="inner"><img src="../../../../static/images/dangjian/home/water-logo.png" alt="" /></div>
                  <div v-if="fileid && fileid !== ''" class="inner"><img :src="showImg(fileid)" alt="" /></div>
                </cube-upload-btn>
              </div>
            </cube-upload>
          </div>

        </section>

        <div class="pdv-10"></div>

        <div class="pdh-4">
          <div class="default-block-btn" @click="submit()">提交</div>
        </div>

        <div class="pdv-10"></div>

      </section>
    </section>
  </article>
</template>


<script>
  import moment from 'moment'
  import tools from '@/utils/tools'
  import api from '@/common/config/api'
  import loginService from '@/service/loginService'
  import fileIcon from '../../../../static/images/up_document.png'
  import {uploadOssAndFileCenter} from '@/utils/aliyun_oss'
  export default {
    name: 'changeAvatar',
    data () {
      return {
        fn: tools,
        data: {},
        fileid: '',
        files: [],
        userInfo: {},
        sysFile: {}
      }
    },
    created () {
      this.userInfo = this.$localStorage.get('userInfo')
      if (this.userInfo.photo && this.userInfo.photo !== '') {
        this.fileid = this.userInfo.photo
      }
    },
    methods: {
      submit () {
        if (this.fileid === '') {
          return tools.tip('请上传文件再提交！')
        }
        let data = {
          fileId: this.fileid
        }
        this.fetchService.photo(data).then(res => {
          if (res.code !== 0) {
            return tools.tip(res.message)
          }
          this.userInfo.photo = this.fileid
          this.$store.state.userInfo = this.userInfo
          this.$localStorage.set('userInfo', this.userInfo)
          tools.back()
        })
      },
      // upload to ali
      async uploadAli (file) {
        let addFileData = await uploadOssAndFileCenter(file)
        this.fileid = addFileData.fileId
      },
      uploadFile (file) {
        /*if (this.TYPE === 'ALI') {
          return this.uploadAli(file)
        }*/
        let formData = new FormData()
        formData.append('file', file[0])
        loginService.o_upload(formData).then((res) => {
          if (res.code !== 0) {
            return tools.tip(res.message)
          }
          this.fileid = res.data.fileId
          console.log("this.sysFile.url=", this.sysFile.url)
        })
      },
      onInput (file) {
        console.log("file={}", this.$refs.upload.files)
        this.$refs.upload.files.map((v) => {
          if (!tools.isImage(v.name)) {
            v.url = fileIcon
          }
          return v
        })
      },
      showImg (fileId) {
        let fileUrl = this.tools.getImgUrl(fileId)
        return fileUrl
      }
    }
  }
</script>

<style scoped>

</style>
